import React from 'react'
import {Form,Input,Button} from 'antd'
import $http from '../api/http'
import {useNavigate} from 'react-router-dom'
export default function Login() {
  const nav=useNavigate()
  const login=async(values)=>{
    const {data:{code,data:{userInfo,token}}}=await $http.users.login(values)
    if(code){
      localStorage.setItem('token',token)
      localStorage.setItem('userInfo',JSON.stringify(userInfo))
      nav("/",{replace:true})
    }
  }
  return (
    <div className='loginBox'>
      <Form
        labelCol={{
          span:4
        }}
        wrapperCol={{
          span:20
        }}
        onFinish={login}>
        <Form.Item
          label={<div style={{color:'#fff'}}>用户名</div>}
          name="account"
          rules={[
            {
              required:true,
              message:'请输入用户名!'
            }
          ]}>
            <Input/>
        </Form.Item>
        <Form.Item
          label={<div style={{color:'#fff'}}>密码</div>}
          name="password"
          rules={[
            {
              required: true,
              message: '请输入密码!',
            },
          ]}>
            <Input.Password></Input.Password>
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
           <Button type="primary" danger htmlType='submit'>登录</Button>
        </Form.Item>
      </Form>
    </div>
  )
}
